<template>
  <div id="main">
    <div class="main-inner">
      <SideGuide/>
      <Search/>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import SideGuide from '@/components/SideGuide/SideGuide.vue'
import Search from '@/components/Search/Search.vue'
import {mapState} from 'vuex'
import ws from '@/websocket/websocket.js'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    if (!this.userInfo.id) { // 如果vuex userInfo是空对象则自动登录
      this.$store.dispatch('autoLogin') // 调用action的autoLogin，实现自动登录
    }
    if (!this.userInfo.id) { // 再次判断，如果还是空对象则自动登录失败
      this.$Modal.warning({
        title: '您还未登录，请先登录',
        okText: '去登录',
        onOk: () => {
          this.$router.replace('/login')
        }
      })
    } else { // 登录成功
      this.$store.dispatch('getFriendRequestList') // 获取好友请求列表
      this.$store.dispatch('getContacts') // 获取通讯录列表

      const body = { // 定义ws发送体
        chatMsgInput: {
          accepterId: null,
          msg: null,
          msgId: null,
          senderId: this.$store.state.userInfo.id
        },
        extend: null,
        type: 1
      }
      if (ws.readyState === 1) { // 若是ws开启状态
        ws.send(JSON.stringify(body))
      } else if (ws.readyState === 0) { // 若是 正在开启状态，则等待300毫秒
        setTimeout(function () {
          ws.send(JSON.stringify(body))
        }, 300)
      }
    }
  },
  components: {
    SideGuide,
    Search
  }
}
</script>

<style lang="stylus">
#main
  padding-top 100px
  height 80%
  min-height 600px
  .main-inner
    height 100%
    min-width 800px
    max-width 1000px
    margin 0 auto
    position relative
    background #f9f9f9
    box-shadow #999 0 2px 10px
    border-radius 4px
</style>
